<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="success" @click="handleCreate"
          >&emsp;新增&emsp;</el-button
        >
        <el-form
          :inline="true"
          :model="listQuery"
          ref="listQuery"
          class="demo-form-inline"
        >
          <el-form-item label="">
            <el-date-picker
                v-model="value1"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="item">
        <el-table
          v-loading="listLoading"
          ref="dataList"
          :data="menuList"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <el-table-column prop="id" label="ID"> </el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="target_score" label="评分值">
          </el-table-column>
          <el-table-column prop="extra_type_name" label="额外条件类型">
          </el-table-column>
          <el-table-column prop="extra_score" label="额外评分值">
          </el-table-column>
          <el-table-column prop="color_name" label="背景图颜色">
          </el-table-column>
          <el-table-column prop="reward_name" label="道具包名称">
          </el-table-column>
          <el-table-column prop="reward_number" label="道具包数量">
          </el-table-column>
          <el-table-column prop="reward_picture" label="道具包封面图">
            <template slot-scope="scope">
              <el-popover placement="right" max-width="420" trigger="hover">
                <img
                  :src="scope.row.reward_picture"
                  alt=""
                  style="max-width: 200px; max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.reward_picture"
                  alt=""
                  style="width: 50px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scoped">
              <el-tag v-if="scoped.row.status === 0" type="danger"
                >不展示</el-tag
              >
              <el-tag v-else-if="scoped.row.status === 1" type="success"
                >展示</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                plain
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.per_page"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="editRulesForm"
        :rules="editRulesFormRules"
        ref="editRulesForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="editRulesForm.title"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="评分值" prop="target_score">
          <el-input
            v-model="editRulesForm.target_score"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="额外评分类型" prop="extra_type">
          <el-select filterable v-model="editRulesForm.extra_type" placeholder="请选择">
            <el-option
              v-for="item in gift_type_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="额外评分值" prop="extra_score">
          <el-input
            v-model="editRulesForm.extra_score"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="color">
          <el-select filterable v-model="editRulesForm.color" placeholder="请选择">
            <el-option
              v-for="item in color_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="道具包" prop="reward_id">
          <el-select filterable v-model="editRulesForm.reward_id" placeholder="请选择">
            <el-option
              v-for="item in reward_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="道具包数量" prop="reward_number">
          <el-input
            v-model="editRulesForm.reward_number"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="editRulesForm.status" :label="1">展示</el-radio>
          <el-radio v-model="editRulesForm.status" :label="0">不展示</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="submitForm('editRulesForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  listData,
  detailData,
  addData,
  deleteData,
} from "@/api/giftWall/giftExchange.js";

export default {
  data() {
    return {
      editRulesFormRules: {
        target_score: [
          { required: true, message: "请输入评分值", trigger: "blur" },
        ],
        color: [{ required: true, message: "请选择颜色", trigger: "change" }],
        reward_id: [
          { required: true, message: "请选择道具包", trigger: "change" },
        ],
      },
      editRulesForm: {
        id: undefined,
        title: undefined,
        target_score: undefined,
        extra_type: undefined,
        extra_score: undefined,
        color: undefined,
        reward_id: undefined,
        reward_number: undefined,
        status: 1,
      },

      gift_type_list: [],
      color_list: [],
      reward_list: [],
      status_list: [],

      dialogStatus: "",
      // dialog的头部信息
      titleMap: {
        update: "编辑",
        create: "新增",
      },
      dialogFormVisible: false,
      deleteDialogVisible: false,
      listLoading: false,
      menuList: [],
      limitList: [],
      listQuery: {
        page: 1,
        per_page: 10,
      },
      total: 0,
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.per_page) {
        urlData = urlData + `per_page=${this.listQuery.per_page}`;
      }
      listData(urlData).then((response) => {
        this.menuList = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    detailList() {
      detailData().then((response) => {
        this.gift_type_list = response.data.gift_type_list;
        this.color_list = response.data.color_list;
        this.reward_list = response.data.reward_list;
        this.status_list = response.data.status_list;

        this.gift_type_list.map((item, index) => {
          if (item.id === 0) {
            return undefined;
          } else {
            return item.id;
          }
        });
      });
    },

    // 点击新增
    handleCreate() {
      this.resetForm("editRulesForm");
      this.detailList();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    // 点击编辑
    handleUpdate(row) {
      this.detailList();

      this.editRulesForm.id = row.id;
      this.editRulesForm.title = row.title;
      this.editRulesForm.target_score = row.target_score;
      this.editRulesForm.extra_type = row.extra_type;
      this.editRulesForm.extra_score = row.extra_score;
      this.editRulesForm.color = row.color;
      this.editRulesForm.reward_id = row.reward_id;
      this.editRulesForm.reward_number = row.reward_number;
      this.editRulesForm.status = row.status;

      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    },
    // 重置表单内容
    resetForm(formName) {
      this.$nextTick(() => {
        // this.$refs[formName].resetFields();
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }
        this.editRulesForm = {
          id: undefined,
          title: undefined,
          target_score: undefined,
          extra_type: undefined,
          extra_score: undefined,
          color: undefined,
          reward_id: undefined,
          reward_number: undefined,
          status: 1,
        };
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          if (this.dialogStatus === "create") {
            let formData = new FormData();
            for (let item in this.editRulesForm) {
              this.editRulesForm[item] === undefined
                ? ""
                : formData.append(item, this.editRulesForm[item]);
            }
            addData(this.editRulesForm).then((response) => {
              if (response.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000,
                });
              }
            });
          } else {
            let formData = new FormData();
            for (let item in this.editRulesForm) {
              this.editRulesForm[item] === undefined
                ? ""
                : formData.append(item, this.editRulesForm[item]);
            }
            addData(formData).then((response) => {
              if (response.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000,
                });
              }
            });
          }
        } else {

          return false;
        }
      });
    },
    // 点击单个删除
    handleDelete(row) {
      this.dataIds = { ids: `${row.id}` };
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      // this.dataIds)
      deleteData(this.dataIds).then((response) => {
        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000,
          });
        } else {
          this.$message({
            message: response.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
